<template>
  <BottomDialog :is-show="props.isShow">
    <template #title>
      <p class="text-center text-white font-size-16 font-weight-500 line-height-140 font-style-normal">
        {{ $t('title.resetLinkSent') }}
      </p>
    </template>
    <template #prepend-icon>
      <Icon size="16" name="arrowLeft" @click="backToPrev"></Icon>
    </template>
    <template #append-icon>
      <slot name="append-icon"></slot>
    </template>
    <template #body>
      <div class="gap-col-24">
        <div class="font-size-14 font-weight-400 line-height-125 text-graydisabled">
          {{ $t('content.resetLinkSent', { mail: meta?.resetPwdEmail }) }}
        </div>
        <BlockButton :label="$t('common.useOtherEmail')" :is-gradient="false" @click="backToPrev"></BlockButton>
      </div>
    </template>
  </BottomDialog>
</template>
<script setup>
import { onUnmounted } from 'vue'
import { storeToRefs } from 'pinia'
import { useAuthRouteStore } from '@/store/auth-route'
import { $t } from '@/i18n'
import BlockButton from '@/components/button/BlockButton.vue'
import BottomDialog from '@/components/dialogs/BottomDialog.vue'
import { AUTH_ROUTES } from '@/constant'

const props = defineProps({
  isShow: {
    type: Boolean,
    default: false,
  },
})

const authRouteStore = useAuthRouteStore()
const { to, clearMeta } = authRouteStore
const { meta } = storeToRefs(authRouteStore)

const backToPrev = () => {
  clearMeta()
  to(AUTH_ROUTES.FORGET_PASSWORD)
}

onUnmounted(clearMeta)
</script>
